define([
  'jquery',
  'views/View',
  'views/AlertMessageView',
  'views/ConfirmationMessageView'
], function($, View, AlertMessageView, ConfirmationMessageView){
  var AlertBoxMessagesView = View.extend({
    initialize: function() {
      this.el = $("#messages_box");
      this.collection.bind("add", this.render, this);
      this.collection.bind("reset", this.clear, this);
    },

    clear: function() {
      this.el.empty();
    },
    
    render: function() {
      var self = this,
          view;

      // Clear the messages box
      this.clear();
      
      this.collection.each(function(alert) {
        if(!alert.get("model")) {
          view = new AlertMessageView({model: alert});
        } else {
          view = new ConfirmationMessageView({model: alert});
        }
        self.el.append(view.render().el);
      });
      // Clear messages
      this.collection.reset([], {silent: true});
      return this;
    }

  });
  return AlertBoxMessagesView;
});